iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 19
0
Modern Web

React Native 航向真全端,建構雙平台 App系列 第 19

React Native App 實戰 (二) 87% 像 Spotify 登入頁面

  • 分享至 

  • xImage
  •  

昨天有把 boilerplate 架起來了,那我們今天就來刻第一個畫面,我們的目標是要刻一個 EC 的 App 所以當然少不了登入頁面,今天我們就拿 Spotify 的登入介面來試試看吧。預計要刻成這個樣子
http://ithelp.ithome.com.tw/upload/images/20170103/20103341iiqjMlSGZ3.jpg

好摟,首先呢我們要在 route 加上我們的 component,我們使用的是 react-native-router-flux
這部分我有在 React Native Navigator 進階版 使用 react-native-router-flux 介紹到,
import 我們預計要寫的 Component 並在 Route 加上去

import Login from './Login';
<Scene key="login" hideNavBar component={Login} title="登入" initial />

過來我們在 Login 裡面加一個滿版的 style,方便使用

  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },

然後用一個 position: 'absolute' 的 Image 當作背景
View 分三個區塊 Logo、描述、登入按鈕
Logo、描述 的區塊用一個 View 把文字置中並且 textAlign: 'center'
登入按鈕 的部分使用 flexDirection: 'row' 讓他按鈕並排
過來配上之前介紹的一些 style 就完成了。

完整 Login Component

import React, { Component, PropTypes } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Image,
} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  bottmContainer: {
    height: 60,
    flexDirection: 'row',
  },
  background: {
    height: 800,
    width: 600,
    position: 'absolute',
  },
  button: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonText: {
    fontSize: 20,
    color: '#fff',
    fontWeight: 'bold',
  },
  title: {
    fontSize: 30,
    color: '#fff',
    fontWeight: 'bold',
    backgroundColor: 'rgba(0,0,0,0)'
  },
  desc: {
    fontSize: 20,
    color: '#fff',
    backgroundColor: 'rgba(0,0,0,0)',
    textAlign: 'center'
  }
});

export default class Login extends Component {
  static propTypes = {};

  render() {
    return (
      <View style={styles.container}>
        <Image style={styles.background} source={{ uri: 'https://unsplash.it/800/600?image=102&blur' }} />
        <View style={styles.container}>
          <Text style={[styles.title, { fontSize: 40}]}>Logo</Text>
        </View>
        <View style={styles.container}>
          <Text style={styles.title}>Your Music</Text>
          <Text style={styles.desc}>Save any song, album or artist to yout own music collection.</Text>
        </View>
        <View style={styles.bottmContainer}>
          <TouchableOpacity style={[styles.button, { backgroundColor: '#53423D'}]}>
            <Text style={styles.buttonText}>LOG IN</Text>
          </TouchableOpacity>
          <TouchableOpacity style={[styles.button, { backgroundColor: '#A58987' }]}>
            <Text style={styles.buttonText}>SIGN UP</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

完成結果

IOS
http://ithelp.ithome.com.tw/upload/images/20170103/20103341kTWdi3TK3K.png

Android
http://ithelp.ithome.com.tw/upload/images/20170103/20103341aX6I74qd9n.png


有問題歡迎來 React Native Taiwan 問喔
創科資訊


上一篇
React Native App 實戰 (一) 初始專案
下一篇
React Native App 實戰 (三) 首頁 - 廣告 Banner
系列文
React Native 航向真全端,建構雙平台 App30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言